import React, { useState, useEffect } from 'react';
import { Card, Form, Input, Switch, Button, Select, Radio, Divider, message, Spin } from 'antd';
import { SaveOutlined, UndoOutlined, SettingOutlined } from '@ant-design/icons';
import axios from 'axios';

const { Option } = Select;

const GeneralSettings = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);

  // 加载设置
  useEffect(() => {
    fetchSettings();
  }, []);

  // 获取系统设置
  const fetchSettings = async () => {
    setLoading(true);
    try {
      const response = await axios.get('/api/settings/general');
      form.setFieldsValue(response.data);
    } catch (error) {
      console.error('获取系统设置失败:', error);
      message.error('获取系统设置失败');
    } finally {
      setLoading(false);
    }
  };

  // 保存设置
  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      
      await axios.post('/api/settings/general', values);
      message.success('系统设置已保存');
    } catch (error) {
      console.error('保存系统设置失败:', error);
      message.error('保存系统设置失败');
    } finally {
      setSaving(false);
    }
  };

  // 重置表单
  const handleReset = () => {
    form.resetFields();
    fetchSettings();
  };

  return (
    <Spin spinning={loading}>
      <Card 
        title={
          <div>
            <SettingOutlined style={{ marginRight: 8 }} />
            基本设置
          </div>
        }
        extra={
          <div>
            <Button 
              style={{ marginRight: 8 }} 
              icon={<UndoOutlined />} 
              onClick={handleReset}
            >
              重置
            </Button>
            <Button 
              type="primary" 
              icon={<SaveOutlined />} 
              onClick={handleSave}
              loading={saving}
            >
              保存
            </Button>
          </div>
        }
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            systemName: 'WhatsApp中间平台',
            language: 'zh_CN',
            defaultTheme: 'light',
            sessionTimeout: 24,
            enableAutoReconnect: true,
            maxAttachmentSize: 10,
            messageHistoryDays: 30,
            notificationsEnabled: true,
            connectionMode: 'standard'
          }}
        >
          <Divider orientation="left">系统设置</Divider>
          
          <Form.Item
            name="systemName"
            label="系统名称"
            rules={[{ required: true, message: '请输入系统名称' }]}
          >
            <Input placeholder="输入系统名称" />
          </Form.Item>
          
          <Form.Item
            name="language"
            label="系统语言"
            rules={[{ required: true, message: '请选择系统语言' }]}
          >
            <Select placeholder="选择系统语言">
              <Option value="zh_CN">简体中文</Option>
              <Option value="en_US">English (US)</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="defaultTheme"
            label="默认主题"
            rules={[{ required: true, message: '请选择默认主题' }]}
          >
            <Radio.Group>
              <Radio value="light">浅色</Radio>
              <Radio value="dark">深色</Radio>
              <Radio value="system">跟随系统</Radio>
            </Radio.Group>
          </Form.Item>
          
          <Form.Item
            name="sessionTimeout"
            label="会话超时时间(小时)"
            rules={[{ required: true, message: '请输入会话超时时间' }]}
          >
            <Select>
              <Option value={1}>1小时</Option>
              <Option value={6}>6小时</Option>
              <Option value={12}>12小时</Option>
              <Option value={24}>24小时</Option>
              <Option value={48}>48小时</Option>
              <Option value={168}>7天</Option>
            </Select>
          </Form.Item>
          
          <Divider orientation="left">WhatsApp连接设置</Divider>
          
          <Form.Item
            name="enableAutoReconnect"
            label="启用自动重连"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          
          <Form.Item
            name="connectionMode"
            label="连接模式"
            rules={[{ required: true, message: '请选择连接模式' }]}
          >
            <Radio.Group>
              <Radio value="standard">标准模式</Radio>
              <Radio value="multidevice">多设备模式</Radio>
            </Radio.Group>
          </Form.Item>
          
          <Form.Item
            name="maxAttachmentSize"
            label="最大附件大小(MB)"
            rules={[{ required: true, message: '请输入最大附件大小' }]}
          >
            <Select>
              <Option value={5}>5MB</Option>
              <Option value={10}>10MB</Option>
              <Option value={20}>20MB</Option>
              <Option value={50}>50MB</Option>
              <Option value={100}>100MB</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="messageHistoryDays"
            label="消息历史保留时间(天)"
            rules={[{ required: true, message: '请输入消息历史保留时间' }]}
          >
            <Select>
              <Option value={7}>7天</Option>
              <Option value={15}>15天</Option>
              <Option value={30}>30天</Option>
              <Option value={60}>60天</Option>
              <Option value={90}>90天</Option>
              <Option value={180}>180天</Option>
              <Option value={365}>365天</Option>
            </Select>
          </Form.Item>
          
          <Divider orientation="left">通知设置</Divider>
          
          <Form.Item
            name="notificationsEnabled"
            label="启用通知"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          
          <Form.Item
            name="notificationSound"
            label="通知声音"
          >
            <Select disabled={form.getFieldValue('notificationsEnabled') === false}>
              <Option value="default">默认声音</Option>
              <Option value="bell">铃声</Option>
              <Option value="chime">风铃声</Option>
              <Option value="glass">玻璃声</Option>
              <Option value="none">无声</Option>
            </Select>
          </Form.Item>
        </Form>
      </Card>
    </Spin>
  );
};

export default GeneralSettings; 